<template>
    <div>
        <van-search placeholder="请输入搜索关键词" v-model="textvalue" @search="onSearch"/>
        <ul>
            <li v-for="data in searchcinemas" :key="data.cinemaId" class="onecinema">
            <div class="textarea">
               <div class="cinemaname">{{ data.name }}</div>
               <div class="cinemaaddres">{{ data.address }}</div>
            </div>
                <div class="price">
                    <div>￥{{ data.lowPrice/100 }}起</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import isshowobj from '@/util/mixinObj.js'
export default {
    mixins:[isshowobj],
    data(){
        return {
            textvalue : '',
            searchcinemas :[]
        }
    },
    mounted(){
        // 分发
        if(this.$store.state.cinemaslist.length === 0){
            this.$store.dispatch('getCity').then(res=>{
                this.thisCityId = this.$store.state.cityId
            })
        } 
        if(this.$store.state.nowCityId !== this.$store.state.lastCityId){
            this.$store.dispatch('getCity').then(res=>{
                console.log(2)
            })
        }
    },
    methods:{
        onSearch(){
            this.searchcinemas = []
            for(var i = 0;i<this.$store.state.cinemaslist.length;i++ ){
                if(this.$store.state.cinemaslist[i].name.includes(this.textvalue)){
                    this.searchcinemas.push(this.$store.state.cinemaslist[i])
                }
            }
            console.log(this.searchcinemas)
        }
    }
}
</script>

<style lang="scss" scoped>
ul{
    list-style-type: none;
    margin-bottom: 0.49rem;
}
.textarea{
    width: 2.6rem;
    height: 0.45rem;
    padding-right: 15px;
    float: left;
}
.price{
    width: 0.7rem;
    height: 0.45rem;
    float: left;
    font-size: 15px;
    color: orangered;
}
.onecinema{
    height: 0.455rem;
    padding: 15px;
}
.cinemaname{
    width: 2.8rem;
    font-size: 15px;
}
.cinemaaddres{
    font-size: 12px;
    margin-top: 5px;
    width: 2.12rem;
    height: 0.18rem;
    color: gray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
